<template>
  <el-dialog v-model="isShowWindow" v-if="isShowWindow" :width="windowHeight" :show-close="false">
    <template #header>
      <div class="my-header">
        <h4>{{ winTitle }}</h4>
        <el-icon @click="closeWin"><Close /></el-icon>
      </div>
    </template>
    <slot name="form"></slot>
    <template #footer v-if="showFooter">
      <span class="dialog-footer" >
          <el-button @click="closeWin">取消</el-button>
          <el-button type="primary" @click="cateSubMit(null)">确定</el-button>
          <el-button type="success" v-if="page === 'add' && isAddMore" @click="cateSubMit('more')">保存并继续添加</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="Window">
import { defineProps, defineEmits } from "vue";
import { Close } from '@element-plus/icons-vue'
let emit = defineEmits(['closeWin','cateSubMit'])
let props = defineProps({
  isShowWindow: {
    type: Boolean,
    default: false
  },
  windowHeight: {
    type: String,
    default: '30%'
  },
  winTitle:{
    type: String,
    default: ''
  },
  page: {
    type: String,
    default: 'add'
  },
  isAddMore: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: true
  }
})
function closeWin () {
  emit('closeWin', false)
}
function cateSubMit (more) {
  emit('cateSubMit',more)
}
</script>

<style scoped lang="css">
.my-header {
  position: absolute;
  top: 3%;
  left: 3%;
  right: 3%;
  height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: unset;
  color: var(--el-text-color-primary)
}
</style>
